<!doctype html>
<html>
<head>
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="author" content="guo,1057540638@qq.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,target-densityDpi=medium-dpi, minimal-ui" />
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

<!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

<!--meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" -->
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- iOS 图标 begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<!-- iOS 图标 end -->

<!-- iOS 启动画面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/App-ios-logo-152x152.png"/>
<!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="img/App-ios-logo-152x152.png"/>
<!-- iPad 竖屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/App-ios-logo-152x152.png"/>
<!-- iPad 横屏 1024x748（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="img/App-ios-logo-152x152.png"/>
<!-- iPad 横屏 2048x1496（Retina） -->

<link rel="apple-touch-startup-image" href="img/App-ios-logo-152x152.png"/>
<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="img/App-ios-logo-152x152.png"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="img/App-ios-logo-152x152.png"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<!-- iOS 启动画面 end -->

<!-- iOS 设备 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁贴图标 -->

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 订阅 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->
<!-- sns 社交标签 begin -->
<!-- 参考微博API -->
<meta property="og:type" content="类型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />
<!-- sns 社交标签 end -->
<title>首页</title>
<link rel="stylesheet" href="__INDEX__/css/common.css">
<link rel="stylesheet" href="__INDEX__/css/font.css">
<link rel="stylesheet" href="__INDEX__/css/header.css">
<link rel="stylesheet" href="__INDEX__/css/footer.css">
<link rel="stylesheet" href="__INDEX__/css/index.css">
<link rel="stylesheet" href="__INDEX__/css/responsive.css">
</head>

<body ontouchstart="return true;">

	<!--订单页面-->
	<!--头部-->
	<header>
		<meta charset="utf-8" />
		<div class="header">
			<h1>提交订单</h1>
			<a href="/index/index.html" class="return"><i></i></a>
		</div>
	</header>
	<style>
		.ztaddress{
			border: 1px solid red;
		}
	</style>
	<form class="mui-input-group quer_input_group" id='my_form' method="post" action="{:url('member/order_buy')}">
	<!--内容区-->
	<article class="main-container add-product">
		<!--配送方式-->
		<div class="order-Delivery line" id="orderDelivery">
			<p>配送方式</p>
			<ol class="FilterContentList">
				<li><span class="select icon-correct">快递物流</span></li>
				<li><span onclick="zt_ads()">上门自提</span></li>
			</ol>
			<ul class="order-Delivery-Pick">
				<!--<li class="line"><span>地址1：广东省 广州市 天河区 广州中山大道中111号</span></li>
				<li class="line"><span>地址2：广东省 广州市 天河区 广州中山大道中112号</span></li>-->
			</ul>

		</div>
		<!--地址-->
		<div class="order-Address line select " id="Edit-Address">
			<!--<dl id="xsaddress">
				<dt><i class="icon-head"></i>郭小帅&nbsp;&nbsp;<i class="icon-phone"></i>131****1111</dt>
				<dd>广东省 广州市 越秀区 广州中大道中111号</dd>
			</dl>
			<font class="icon-code"></font>-->
		</div>
		<!--添加地址-->
		<div class="order-add-address line hide" id="Add-Address">添加地址</div>

		<!--弹出管理地址层-->
		<!--<div class="Edit-Address-Content fadeInBottom100" id="Edit-Address-Content">
			<div class="LayerHeader line">选择收货地址<button class="close pl"><i class="icon-plus rot45"></i></button><button class="head-r">添加</button></div>
			<ul class="line-li" id="addresslist">
				<li class="select"><span class="icon-correct"></span>郭小帅，13112224413<p>广东省 广州市 天河区 广州中大道中111号</p><font class="icon-code" id="order-Edit-address"></font></li>
			</ul>
		</div>-->

		
		<!--弹出添加地址层-->

		<div class="Add-Address-Content fadeInBottom100" id="Add-Address-Content">
			
			<div class="LayerHeader line">添加收货地址<button class="close pl"><i class="icon-plus rot45"></i></button><button type="button" class="head-r" onclick="saveaddress()">保存</button></div>
			
			<div class="list list-title">
				<ul>
					<li><i>收&nbsp;&nbsp;货&nbsp;&nbsp;人：</i><input type="text" id="consignee" placeholder="名字"></li>
					<li><i>联系电话：</i><input type="tel" id="mobile" placeholder="手机或固话"></li>
					<li class="list03"><i>所在地区：</i>
						<select name="select" id="province">
							<option value="" selected="selected">选择省份</option>
							{volist name="province_list" id="vo" }
							<option value="{$vo.name}">{$vo.name}</option>
							{/volist}
						</select>
						<select name="select" id="city">
							<option value="" selected="selected">选择城市</option>
							{volist name="city_list" id="vo" }
							<option value="{$vo.name}">{$vo.name}</option>
							{/volist}
						</select>
						<select name="select" id="district">
							<option value="" selected="selected">选择区县</option>
							{volist name="district_list" id="vo" }
							<option value="{$vo.name}">{$vo.name}</option>
							{/volist}
						</select>
					</li>
					<li><i>详情地址：</i><input type="text" id="address" placeholder="街道门牌信息"></li>
					<!--<li><i>邮政编码：</i><input type="tel" id="name" placeholder="邮政编码（选填）"></li>-->
				</ul>
			</div>
			
		</div>

		<!--已购产品-->
		<!--<div class="order-product line" onclick="location.href='order-product.html'">
			<ul>
				<li><img src="img/img02.jpg" alt=""><img src="img/img06.jpg" alt=""><img src="img/img07.jpg" alt=""><img src="img/img08.jpg" alt=""></li>
			</ul>
			<font class="icon-arrowright"></font>
			<font>共9件</font>
		</div>-->
		
		<!--优惠券-->
		
		<!--订单备注-->
		<div class="order-Remark line">
			<p>订单备注</p>
			<samp><textarea class="line-ora" placeholder="限50个字以内" id="memo" name="memo"></textarea></samp>
		</div>
		
		
		
		<!--支付方式-->
		<div class="order-Delivery line" id="orderPayse">
			<p>支付方式</p>
			<ol class="FilterContentList">
			</ol>
			<div class="list">
				<ul class="line">
					<li class="select"><i class="icon-weixinpay"></i>微信支付<em class="icon-correct"></em></li>
					<li><i class="icon-alipay"></i>支付宝支付<em class="icon-correct"></em></li>				
				</ul>
			</div>
		</div>
		
		<!--总金额-->
		<ul class="order-Total-Price line">
			<li>¥<span id="price">{$price}</span>商品金额</li>
			<li>¥<span id="yf">10.00</span>运费</li>
		</ul>
		<br><br>



		<!--订单支付-->


	</article>

	<!--底部栏目-->
	<footer>
		<div class="button" onclick="tjorder()"><button type="button">提交订单</button></div>
		<h4>实付款：¥<span id="sfprice" name="sfprice">0.00</span></h4>
	</footer>
	<input type="hidden" id="agent_id" name="agent_id"  value="{$agent_id}" />
	<input type="hidden" id="ddprice" name="ddprice" value="0" />
	<input type="hidden" id="adsflag" name="adsflag" value="1" />
	<input type="hidden" id="ztads" name="ztads" value="" />
	</form>
</body>
</html>
{include file="public/footer" /}
<script type="text/javascript" src="__INDEX__/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="__INDEX__/js/common.js"></script>
<script type="text/javascript" src="__INDEX__/js/layui.js"></script>
<script>
	
	//支付
	function tjorder(){
		var psfs = $("#orderDelivery ol li span.select").text();
		if(psfs=='上门自提'){
			var ztadress = $(".ztaddress").text();
			if(!ztadress){
				layer.msg("请选择地址!");
				return;			
			}			
		}else{
			var flag = $("#adsflag").val();
			if(flag==2){
				$("#Add-Address-Content").css("display","block");
				return;
			}
		}
		
		$("#my_form").submit();

	}
	
	$(document).ready(function(){
		//初始化价格
		$price = parseFloat($("#price").text()) + 10;
		$("#sfprice").text($price);
		$("#ddprice").val($price);
		
		//配送方式
		$("#orderDelivery ol li").bind('click',function(){
			
			if($(this).index()==0){
				$("#orderPays").show();
				$("#orderDelivery ol li:nth-child(1) span").addClass("select icon-correct");
				$("#orderDelivery ol li:nth-child(2) span").removeClass();
				$("#orderDelivery .order-Delivery-Pick").hide();
			}else{
				$("#orderPays").hide();
				$("#orderDelivery ol li:nth-child(1) span").removeClass();
				$("#orderDelivery ol li:nth-child(2) span").addClass("select icon-correct");
				$("#orderDelivery .order-Delivery-Pick").show();
			}
			
		})
		//支付方式
		$("#orderPayse ol li").bind('click',function(){
			
			if($(this).index()==0){
				$("#orderPayse ol li:nth-child(1) span").addClass("select icon-correct");
				$("#orderPayse ol li:nth-child(2) span").removeClass();
				$("#orderPayse ul").show();
			}else{
				$("#orderPayse ol li:nth-child(1) span").removeClass();
				$("#orderPayse ol li:nth-child(2) span").addClass("select icon-correct");
				$("#orderPayse ul").hide();
			}
			
		})
		
		//支付方式
		$("#orderPayse ul li").bind('click',function(){
			
			if($(this).index()==0){
				$("#orderPayse ul li:nth-child(1)").addClass("select");
				$("#orderPayse ul li:nth-child(2)").removeClass();
			}else{
				$("#orderPayse ul li:nth-child(1)").removeClass();
				$("#orderPayse ul li:nth-child(2)").addClass("select");
			}
			
		})
		
		var o = document.getElementById('date');

    var o = document.getElementById('time');

    
	})

	
	//选地址
	$("#Edit-Address").click(function(){
		$("#cartContent").css("display","none");
	});
	
	address();
	//选择地址
	function address(){
		$.ajax({
			url: "{:url('member/getaddress')}",
			type: 'POST',
			//成功了的回调，并且带有返回值
			success: function(data) {            	
            	if(data.code==200){
            		var data = data.data;
	             	var str = '';
	            	if(data){
	            		str = '<dl id="xsaddress">'+
	            		'<dt><i class="icon-head"></i>'+ data['consignee'] +'&nbsp;&nbsp;<i class="icon-phone"></i>'+ data['mobile'] +'</dt>'+
						'<dd>'+ data['province'] +'&nbsp;&nbsp;'+ data['city'] +'&nbsp;&nbsp;'+ data['district'] +'&nbsp;&nbsp;'+data['address']+'</dd>';       		
	            	}
					$("#Edit-Address").html(str);           		
            	}else{
            		layer.msg(data.msg);
            		$("#adsflag").val(2);
            		$("#Add-Address-Content").css("display","block");
            	}

			}
		})		
	}
	
	//保存地址
	function saveaddress(){
		var province = $("#province option:selected").val();
		var city = $("#city option:selected").val();
		var district = $("#district option:selected").val();
		var consignee = $("#consignee").val();
		var mobile = $("#mobile").val();
		var address = $("#address").val();
		var con = layer.confirm('确认操作?', function(index) {
			$.ajax({
				url: "{:url('member/address_add')}",
				type: 'POST',
				data: {
					province : province,
					city : city,
					district : district,
					consignee : consignee,
					mobile : mobile,
					address : address
				},
				//成功了的回调，并且带有返回值
				success: function(data) {
					if(data.code==200){
						$("#Add-Address-Content").css("display","none");
		            	var data = data.data;
		            	var str = '';
		            	if(data){
		            		str = '<dl id="xsaddress">'+
		            		'<dt><i class="icon-head"></i>'+ data['consignee'] +'&nbsp;&nbsp;<i class="icon-phone"></i>'+ data['mobile'] +'</dt>'+
							'<dd>'+ data['province'] +'&nbsp;&nbsp;'+ data['city'] +'&nbsp;&nbsp;'+ data['district'] +'&nbsp;&nbsp;'+data['address']+'</dd>';         		
		            	}
						$("#Edit-Address").html(str);
	                }else{
	                	layer.msg(data.msg);//保存成功提示
	                }
	
				}				
			})
			layer.close(index);
		})		
	}
	
	//自提地址
	function zt_ads(){
		$.ajax({
			url: "{:url('member/getztaddress')}",
			type: 'POST',
			data: {
				agent_id : $("#agent_id").val(),
			},
			//成功了的回调，并且带有返回值
			success: function(data) {
				$("#order-Delivery-Pick").css("display","block");
				if(data.code==200){					
	            	var data = data.data;
	            	var str = '';
	            	var str1 = '';
					for(var i = 0; i < data.length; i++) {
	            		str += '<li class="line"><span>地址' + (parseInt(i)+1) + '：'+ data[i].address +'</span>';
	            	}
					$(".order-Delivery-Pick").html(str);
					setEventads();
                }else{
                	layer.msg(data.msg);//保存成功提示
                }

			}
		})		
	}
	
	function setEventads(){
		$(".order-Delivery-Pick li span").click(function(){
			$('.order-Delivery-Pick li span').removeClass("ztaddress");
			$(this).addClass("ztaddress");
			$("#ztads").val($(".ztaddress").text());
		});
	}
</script>